React 的生命周期方法

什么是生命周期方法

可以这样理解，生命周期方法是 React 提供的钩子函数，使得我们可以介入组件的生命周期，比如组件的挂载过程（组件实例被创建并被插入到 DOM 中）和更新（组件的 state 或者 props 改变）过程。

总的来说，组件的挂载过程有 4 个钩子函数，并按照下面的顺序依次调用：

1. constructor(props)
   创建组件实例并将其插入 DOM 时调用。通常在此钩子函数内设置组件的初始状态以及绑定类方法。
2. static getDerivedStateAndProps(props, state)
   组件在初始挂载以及后续每次更新时，该钩子函数都会在 render() 函数之前被调用。此外，由于这是一个静态方法，无法访问组件实例。
3. render()
   对于类组件而言，这是一个必须声明的钩子函数，该函数返回一个 React 元素，以作为组件的渲染结果输出。此钩子函数必须为纯函数，不应该在这里更改组件的 state 和 props。
4. componentDidMount()
   当组件挂载过程完成，会被调用一次。一般做法是，在此钩子函数内获取异步数据并保存到组件的状态。

组件的更新过程有 5 个钩子函数，并按照下面的顺序依次调用：

1. static getDerivedStateFromProps(prop, state)
   同上面的挂载过程
2. shouldComponentUpdate(nextProps, nextState)
   当组件的 state 或者 props 发生改变时被调用，返回一个布尔值以告诉 React 是否执行此次更新。通常的用例是：在大型应用程序中被用作性能优化。
3. render()
   同上面的挂载过程
4. getSnapshotBeforeUpdate(prevProps, prevState, snapshot)
   在最近的一次渲染结果被提交到 DOM 之前被调用。
5. componentDidUpdate()
   更新之后被立即调用，不包括初始渲染。通常用来做 DOM 操作或者异步获取数据。

此外，组件的卸载过程也有 1 个钩子函数：

• componentWillUnmount()
  在组件被销毁之前调用，通常在此钩子函数内做一些清理工作。

最后，componentDidCatch(error, info) 被用来进行错误处理，可以将捕获的错误信息保存到组件状态，以进行相应的处理。